// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  toEscapedSelector as e,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  rules: [
    [
      /^custom-hover$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
          ${selector} {
            cursor: pointer;
            transition: background var(--transition-time-02);
          }
          ${selector}:hover {
            background-color: var(--top-header-hover-color);
          }
          .dark ${selector}:hover {
            background-color: var(--el-bg-color-overlay);
          }
        `
      }
    ],
    [
      /^el-header-bottom$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
          ${selector} {
           position: relative;
           height: 50px;
          }
          ${selector}:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--el-border-color);
            z-index: 1;
          }
        `
      }
    ]
  ],
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-center': 'flex justify-center items-center',
    'flex-between': 'flex justify-between items-center',
    'flex-end': 'flex justify-end items-center',
    'border-bottom': 'border-b border-solid border-[var(--el-border-color)]',
    'border-top': 'border-t border-solid border-[var(--el-border-color)]',
    'main-box': 'h-full rounded-1.5 bg-[var(--el-bg-color)] overflow-x-hidden',
    'content-box': 'p-4.5 flex flex-1 flex-col',
    'table-box': '',
    'form-box': 'w-full',
    'search-box': '',
    'search-operation': 'flex-end p-b-4.5'
  },
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      }
    })
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()]
})
